<template>
  <!-- 显示底部弹窗 -->
  <view class="career_asses_coupon_dialog">
    <u-popup
      v-model="showFirstCouponDialog"
      mode="center"
      :mask-close-able="false"
      height="880rpx"
      width="523rpx"
      border-radius="20"
    >
      <view class="popupRoot">
        <view class="popupContainer">
          <text class="title">恭喜获得优惠券</text>
          <view class="couponPriceContainer">
            <view class="couponPriceBg">
              <text class="couponPriceNumber">{{ firstCoupon }}</text>
              <text class="couponPriceText">元</text>
            </view>
          </view>
          <view class="content">
            现在进行支付，立享礼券减免，超过限时或关闭弹窗即视为放弃减免
          </view>
          <!-- <view class="countdown">
            {{ formatTime(countdown) }}
          </view> -->
          <view class="time-frame">
            <view class="timeStyle"
              ><text class="time">{{ countdownh }}</text></view
            >
            <view class="timeColon">:</view>
            <view class="timeStyle"
              ><text class="time">{{ countdownm }}</text></view
            >
            <view class="timeColon">:</view>
            <view class="timeStyle"
              ><text class="time">{{ countdowns }}</text></view
            >
          </view>
          <view class="bottom_btn">
            <view class="bottom_btn_agree" @click="handleWechatPay">
              <text class="bottom_btn_agree_left"
                >{{ (price - firstCoupon).toFixed(1) }}元
              </text>
              解锁报告
            </view>
            <view class="bottom_btn_refuse" @click="handleRefuse">
              放弃减免机会
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    price: {
      type: Number,
      price: 0,
    },
    firstCoupon: {
      type: Number,
      firstCoupon: 0,
    },
  },
  data() {
    return {
      showFirstCouponDialog: false,
      countdown: 600, // 初始倒计时时间，单位秒
      intervalId: null, // 倒计时定时器id
      countdownh: "",
      countdownm: "",
      countdowns: "",
    };
  },
  methods: {
    init() {
      this.showFirstCouponDialog = true;
      this.countdown = 600;
      //UI说显示空白时间有点长 先默认显示00:10:00
      this.countdownh = "00";
      this.countdownm = "10";
      this.countdowns = "00";
      this.startCountdown();
      console.log("countdown", this.countdown);
    },
    startCountdown() {
      this.intervalId = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
          // 将倒计时的秒数转换为时分秒格式
          let hour = Math.floor(this.countdown / 3600);
          let minute = Math.floor((this.countdown % 3600) / 60);
          let second = this.countdown % 60;

          // 格式化时分秒数据
          let formatHour = hour < 10 ? "0" + hour : hour;
          let formatMinute = minute < 10 ? "0" + minute : minute;
          let formatSecond = second < 10 ? "0" + second : second;

          // 更新倒计时的显示
          this.countdownh = formatHour;
          this.countdownm = formatMinute;
          this.countdowns = formatSecond;
        } else {
          // 倒计时结束，触发事件
          this.handleRefuse();
        }
      }, 1000);
    },
    stopCountdown() {
      clearInterval(this.intervalId);
      this.intervalId = null;
    },
    handleWechatPay() {
      this.$emit("componentPay", {
        type: 2, //自定义参数 1.原价购买 2.减免10元优惠券购买,3.减免20元优惠券购买
      });
    },
    handleRefuse() {
      this.stopCountdown();
      this.showFirstCouponDialog = false;
      this.$emit("closeFirstDialogBack");
    },
  },
};
</script>

<style lang="scss" scoped>
// .image {
//   width: 100vw;
//   max-width: 100%;
// }
.popupRoot {
  display: fixed;
  background-size: 100% 100%;
  background-image: url($img-base + "career/careerAssessResult/bg_coupon.png");
  background-repeat: no-repeat;

  .popupContainer {
    padding-top: 280rpx;
    display: flex;
    flex-direction: column;
    padding-left: 36rpx;
    padding-right: 36rpx;

    .title {
      text-align: center;
      font-size: 30rpx;
      font-weight: 800;
      color: #ffe065;
      padding-bottom: 10rpx;
    }
    .couponPriceContainer {
      display: flex;
      flex-direction: row;
      margin-bottom: 10rpx;
    }
    .couponPriceBg {
      width: 342rpx;
      height: 125rpx;
      margin: 0 auto;
      text-align: center;
      background-size: 100% 100%;
      background-image: url($img-base + "career/careerAssessResult/coupon_price_border.png");
      background-repeat: no-repeat;
    }
    .couponPriceNumber {
      font-size: 92rpx;
      font-weight: bold;
      background: linear-gradient(0deg, #ffeccc 0%, #ffd297 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .couponPriceText {
      font-size: 36rpx;
      font-weight: normal;
      background: linear-gradient(0deg, #ffe5cb 0%, #ffd29e 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .content {
      font-size: 25rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 40rpx;
      margin: 15rpx;
    }
    // .countdown {
    //   color: red;
    //   font-size: 30rpx;
    //   text-align: center;
    //   margin-top: 30rpx;
    // }
    .time-frame {
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      margin-top: 10rpx;
    }
    .timeStyle {
      width: 64rpx;
      height: 64rpx;
      background-color: #9e3b38;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid #999;
      border-radius: 4px;
      padding: 18rpx 14rpx 18rpx 14rpx;
    }
    .timeColon {
      color: #ffffff;
      font-size: 36rpx;
      margin: 0 12rpx 0 12rpx;
    }
    .time {
      color: #ffffff;
      font-size: 36rpx;
    }
    .bottom_btn {
      display: flex;
      flex-direction: column;
      margin-top: 24rpx;
      align-items: center;
    }
    .bottom_btn_agree {
      flex: 1;
      width: 100%;
      height: 74rpx;
      color: #be3625;
      text-align: center;
      background: #ffd258;
      border-radius: 37rpx;
      line-height: 74rpx;
      font-size: 33rpx;
    }
    .bottom_btn_agree_left {
      font-weight: 800;
      margin-right: 10rpx;
    }
    .bottom_btn_refuse {
      flex: 2;
      width: 100%;
      height: 74rpx;
      color: #ffc939;
      text-align: center;
      border: 1px solid #ffc939;
      border-radius: 37rpx;
      line-height: 74rpx;
      font-size: 33rpx;
      margin-top: 20rpx;
      margin-bottom: 38rpx;
    }
  }
}
</style>

